<template>
	<div>
		<zk-table
			ref="table"
			:data="list"
			:columns="columns"
			:selection-type="false"
			:expand-type="false"
			show-index
			index-text="#"
			border
			:show-row-hover="false"
		>
			<template v-slot:cat_deleted="scope">
				<i class="el-icon-circle-check" v-if="!scope.row.cat_deleted"></i>
				<i class="el-icon-circle-close" v-else></i>
			</template>
			<template v-slot:cat_level="scope">
				<el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
				<el-tag type="success" v-else-if="scope.row.cat_level == 1"
					>二级</el-tag
				>
				<el-tag type="warning" v-else>三级</el-tag>
			</template>
			<template v-slot:operate="scope" >
				<el-row>
					<el-button type="primary" @click="puts(scope.row)">编辑</el-button>
					<el-button type="danger" @click="removeItem(scope.row.cat_id,scope.row)">删除</el-button>
				</el-row>
			</template>
		</zk-table>
	<!-- 弹出框 -->
		<el-dialog
			title="修改分类"
			:visible.sync="dialogVisible"
			width="30%"
			:show-close="false"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="分类名称" prop="listChild">
					<el-input v-model="ruleForm.listChild"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles">取 消</el-button>
				<el-button type="primary" @click="dialogVisibled">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'TreeTable',
	components: {},
	data() {
		return {
			dialogVisible: false,
			removeItems:true,
			ruleForm: {
				listChild: '',
				listItem: '',
			},
			username: '',
			lists: this.$store.state.Categories,
			rules: {
				listChild: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
				],
			},

			listId: '',
			columns: [
				{
					label: '分类名称',
					prop: 'cat_name',
				},
				{
					width:'120',
					label: '是否有效',
					type: 'template',
					template: 'cat_deleted',
				},
				{
					width:'120',
					label: '排序',
					type: 'template',
					template: 'cat_level',
				},
				{
					width:'300',
					label: '操作',
					type: 'template',
					template: 'operate',
				},
			],
		}
	},
	computed: {
		list: {
			get() {
				return this.$store.state.Categories.getData || []
			},

			set() {
		

			},
		},
	},
	mounted() {},

	methods: {
		removeItem(id) {	

			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
			}).then(() => {
				this.$http.delete(`/categories/${id}`).then(res =>{
					let {meta} = res.data

					if(meta.status == 200){
						this.$message({
							type:'success',
							message:meta.msg
						})
				this.removeItems = false
				
						this.$store.dispatch('Categories/getData')
					}
					else{
						this.$message.error('获胜失败！')
					}
				})
			
			}).catch(err => {
				console.log(err.message)
				
			})
		},
		puts(data) {
			this.dialogVisible = true
			this.ruleForm.listChild = data.cat_name
			this.listId = data.cat_id
		},

		dialogVisibled() {
			this.$refs.ruleForm.validate(bollean => {
				if (bollean) {
					this.$http
						.put(`/categories/${this.listId}`, {
							cat_name: this.ruleForm.listChild,
						})
						.then(res => {
							let { meta} = res.data

							if (meta.status == 200) {
								this.$message({
									message: meta.msg,
									type: 'success',
								})

								this.$store.dispatch('Categories/getData')
							} else {
								this.$message.error('编辑未成功！')
								return
							}
						})
						.catch(error => {
							console.log(error.message)
						})
				} else {
					this.$message.error('编辑未成功！')
				}
			})
			this.dialogVisible = false
		},
		dialogVisibles() {
			this.dialogVisible = false
		},
	},
}
</script>

<style scoped>
.zk-table {
	font-size: 16px !important;
	line-height: 1.5 !important;
}
.el-icon-circle-check {
	color: #67c23a;
}
.el-button {
	width: 97px;
}
.el-button--danger {
	margin-left: 18px;
}
</style>
